<!-- 文字逐渐浮现 -->
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.text { 
    position:relative; 
    line-height:2em; 
    overflow:hidden; 
} 
.fadingEffect { 
    position:absolute; 
    top:0; bottom:0; right:0; 
    width:100%; 
    background:white; 
    -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */ 
    -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */ 
    -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */ 
    -o-animation: showHide 5s ease-in alternate infinite; /* Opera */ 
    animation: showHide 5s ease-in alternate infinite; 
} 
@-webkit-keyframes showHide { /* Chrome, Safari */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-moz-keyframes showHide { /* FF */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-ms-keyframes showHide { /* IE10 */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@-o-keyframes showHide { /* Opera */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
@keyframes showHide { 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 
	</style>
</head>
<body>
<div class="text"> 
There is some text here! 
<div class="fadingEffect"></div> 
</div>​ 


</body>
</html>